<template>
    <div>
        <van-action-sheet
            :round="false"
            title="请选择讲题"
            style="min-height: 80%; max-height: 80%;"
            @closed="onClosed"
            v-model:show="visible"
        >   
            <van-notice-bar
                wrapable
                :scrollable="false"
                text="没有合适的讲题请滑到此页面最下方，手动输入讲题"
            />
            <div class="select_speaker">
                <div class="vol_meeting_list">
                    <van-list
                        v-model:loading="loading"
                        :finished="true"
                    >
                        <van-empty
                            v-if="topicList.length==0"
                            image="//projectimg-1256680128.cos.ap-beijing.myqcloud.com/lpm/bd4d50fd-1214-423a-bbe8-2bc72dbd45b3.png"
                            image-size="80"
                            description="没有可选讲题"
                        />
                        <van-cell v-for="(item, index) in topicList" 
                        :key="`indexitemtopic${index}`" 
                        :title="item.topic" 
                        :label="`时长：${item.timeRange}min`"
                        is-link
                        @click="speakerSelected(item)"
                        />
                    </van-list> 
                    <van-field
                style="margin-bottom: 25px;"
                v-model="inputValue"
                placeholder="找不到合适的讲题？请输入"
                clearable
                @clear="inputValue = ''"
            >
                <template v-if="inputValue" #button>
                    <van-button size="small" type="primary" @click="onInputConfirm">确定</van-button>
                </template>
            </van-field> 
                </div> 
                
            </div>
            
        </van-action-sheet>
    </div>
</template>
<script>
import { inject } from "vue";
export default {
    props: ['speakerIndex', 'roleIndex'],
    setup() {
        const topicList = inject('constant').topic
        return {
            topicList
        }
    },
    data() {
        return {
            loading: false,
            visible: false,
            inputValue: ''
        }
    },
    mounted() {
        
    },
    methods: {
        init() {
            this.visible = true
        },
        onClosed() {
            this.inputValue = ''
        },
        speakerSelected(item) {
            this.$emit('selected', {
                ...item,
                speakerIndex: this.speakerIndex,
                roleIndex: this.roleIndex
            })
            this.visible = false
        },
        onInputConfirm() {
            this.$emit('selected', {
                timeRange: 20,
                topic: this.inputValue,
                role: 0,
                speakerIndex: this.speakerIndex,
                roleIndex: this.roleIndex
            })
            this.visible = false
        }
        
    }
}
</script>

<style scoped lang="less">
.select_speaker {
    .vol_meeting_list {
        max-height: 70vh;
        overflow-y: auto;
    }
}
    
</style>